import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Button,
  Modal,
  message,
  Tag,
  Icon,
  Checkbox,
  Spin,
} from 'antd';

const data = [
  { wordId: '1', name: '用户信息' },
  { wordId: '2', name: '身份证信息' },
  { wordId: '3', name: '地十信息' },
  { wordId: '4', name: '联系方式' },
  { wordId: '5', name: '用户信息' },
  { wordId: '6', name: '用户信息' },
  { wordId: '7', name: '身份证信息' },
  { wordId: '8', name: '地十信息' },
  { wordId: '9', name: '联系方式' },
  { wordId: '10', name: '用户信息' },
];
@connect(
  state => ({
    dataqueryListForType: state.dataType.dataqueryListForType,
    loadingqueryListForType: state.loading.effects['dataType/queryListForType'],
    loadingdatatypewordreladd: state.loading.effects['dataType/datatypewordreladd'],
  }),
  dispatch => ({
    queryListForType: e => dispatch({ type: 'dataType/queryListForType', payload: e }),
    savequeryListForType: e => dispatch({ type: 'dataType/savequeryListForType', payload: e }),
    datatypewordreladd: e => dispatch({ type: 'dataType/datatypewordreladd', payload: e }),
  })
)
@Form.create({ name: 'BindFields' })
class BindFields extends PureComponent {
  static defaultProps = { text: {} };
  componentDidMount() {
    this.props.queryListForType({ typeId: this.props.text.typeId });
  }
  componentWillUnmount() {
    this.props.savequeryListForType([]);
  }
  okHandle = () => {
    this.props.form.validateFields((err, fieldsValue) => {
      if (err) return;
      this.props
        .datatypewordreladd({
          ...fieldsValue,
          wordIds: fieldsValue.wordIds.join(','),
          typeId: this.props.text.typeId,
        })
        .then(res => {
          if (res.rescode == 200) {
            this.props.handleBindFieldsModalVisible(false);
            Modal.success({ title: '操作成功' });
            this.props.pageList();
          } else {
            Modal.error({ title: '操作失败', content: res.msg });
          }
        });
    });
  };

  render() {
    const { bindFieldsVisible, form, handleBindFieldsModalVisible, text } = this.props;

    return (
      <Modal
        destroyOnClose
        width={640}
        title={'绑定字段'}
        visible={bindFieldsVisible}
        onOk={this.okHandle}
        onCancel={() => handleBindFieldsModalVisible()}
        maskClosable={false}
        confirmLoading={this.props.loadingdatatypewordreladd}
      >
        <Spin spinning={Boolean(this.props.loadingqueryListForType)}>
          <Form.Item>
            {this.props.form.getFieldDecorator('wordIds', {
              initialValue: this.props.dataqueryListForType
                .filter(item => item.checkFlag)
                .map(item => item.wordId),
            })(
              <Checkbox.Group>
                <Row>
                  {this.props.dataqueryListForType.map(item => (
                    <Col span={12}>
                      <Checkbox value={item.wordId}>{item.name}</Checkbox>
                    </Col>
                  ))}
                </Row>
              </Checkbox.Group>
            )}
          </Form.Item>
        </Spin>
      </Modal>
    );
  }
}

export default BindFields;
